<template>
  <div class="header">
    <div class="top2">
      <div class="title">智慧工地数字管理平台</div>
      <div class="header-right">
        <div class="header-user-con">
          <el-dropdown class="user-name" trigger="click" @command="handleCommand">
            <span class="el-dropdown-link">
              {{ username }}
              <i class="el-icon-caret-bottom"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item divided command="loginout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
      <div class="date">{{ nowDate }} {{ nowTime }}</div>
    </div>
    <div>
      <ul class="daohang">
        <li @click="changeIndex(0)" :class="{ t_sel: currentIndex === 0 }">
          <router-link tag="div" to="/page01">
            <span>项目总览</span>
          </router-link>
          <div v-show="currentIndex === 0" class="line"></div>
        </li>
        <li @click="changeIndex(1)" :class="{ t_sel: currentIndex === 1 }">
          <router-link tag="div" to="/page02">
            <span>数字工地</span>
          </router-link>
          <div v-show="currentIndex === 1" class="line"></div>
        </li>
        <li @click="changeIndex(2)" :class="{ t_sel: currentIndex === 2 }">
          <router-link tag="div" to="/page03">
            <span>人员管理</span>
          </router-link>
          <div v-show="currentIndex === 2" class="line"></div>
          <div class="zlgl" v-show="currentIndex === 2">
            <router-link tag="div" to="/page03">
              <span>人员总览</span>
            </router-link>
            <router-link tag="div" to>
              <span>实时测温</span>
            </router-link>
          </div>
        </li>
        <li @click="changeIndex(6)" :class="{ t_sel: currentIndex === 6 }">
          <router-link tag="div" to="/page07">
            <span>安全管理</span>
          </router-link>
          <div v-show="currentIndex === 6" class="line"></div>
          <div class="zlgl" v-show="currentIndex === 6">
            <router-link tag="div" to="/page07">
              <span>隐患统计</span>
            </router-link>
            <router-link tag="div" to="/page12">
              <span>风险源识别</span>
            </router-link>
          </div>
        </li>
        <li @click="changeIndex(4)" :class="{ t_sel: currentIndex === 4 }">
          <router-link tag="div" to="/page08">
            <span>质量管理</span>
          </router-link>
          <div v-show="currentIndex === 4" class="line"></div>

          <div class="zlgl" v-show="currentIndex === 4">
            <router-link tag="div" to="/page08">
              <span>隐患统计</span>
            </router-link>
            <router-link tag="div" to="/page11">
              <span>质量卡控</span>
            </router-link>
          </div>
        </li>

        <li @click="changeIndex(10)" :class="{ t_sel: currentIndex === 10 }">
          <router-link tag="div" to="/page05">
            <span>进度管理</span>
          </router-link>
          <div v-show="currentIndex === 10" class="line"></div>
        </li>
        <li @click="changeIndex(11)" :class="{ t_sel: currentIndex === 11 }">
          <router-link tag="div" to="/page09">
            <span>视频监控</span>
          </router-link>
          <div v-show="currentIndex === 11" class="line"></div>
        </li>

        <li @click="changeIndex(12)" :class="{ t_sel: currentIndex === 12 }">
          <router-link tag="div" to=""> 

          <!-- /page13 -->
            <span>盾构监控</span>
          </router-link>
          <div v-show="currentIndex === 12" class="line"></div>
        </li>

        <li @click="changeIndex(14)" :class="{ t_sel: currentIndex === 14 }">
          <router-link tag="div" to="/page10">
            <span>扬尘监测</span>
          </router-link>
          <div v-show="currentIndex === 14" class="line"></div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      mainname: "",
      nowDate: null, //存放年月日变量
      nowTime: null, //存放时分秒变量
      timer: "", //定义一个定时器的变量
      currentTime: new Date(), // 获取当前时间
      username: "",
      conpany: "",
      name: "",

      currentIndex: 0,
    };
  },
  created() {
    this.timer = setInterval(this.getTime, 1000);
    // 获取浏览器地址
    this.timer = setInterval(this.getTime, 1000);
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer); // 在Vue实例销毁前，清除定时器
    }
  },
  methods: {
    // tab 切换
    changeIndex(index) {
      this.currentIndex = index;
    },
    getTime() {
      function p(s) {
        return s < 10 ? "0" + s : s;
      }
      const date = new Date();
      this.nowDate =
        date.getFullYear() +
        "年" +
        p(date.getMonth() + 1) +
        "月" +
        p(date.getDate()) +
        "日";
      this.nowTime =
        p(date.getHours()) +
        ":" +
        p(date.getMinutes()) +
        ":" +
        p(date.getSeconds());
    },
    haha() {
      this.conpany = localStorage.getItem("conpany");
      this.username = localStorage.getItem("username");
      this.mainname = localStorage.getItem("section_principal");
    },

    // 用户名下拉菜单选择事件
    handleCommand(command) {
      if (command == "loginout") {
        localStorage.removeItem("ms_username");
        localStorage.removeItem("section_id");
        localStorage.removeItem("section_name");
        this.$router.push("/login");
      }
    },
  },
  mounted() {
    this.haha();
  },
};
</script>
<style scoped>
.t_sel {
  font-size: 20px;
  font-weight: 500;
  color: #ffffff;
}

.zlgl {
  width: max-content;
  height: 32px;
  line-height: 32px;
  background: #0b1221;
  border-radius: 10px;
}

.zlgl > div {
  /* width: 65px; */

  /* height: 16px; */
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
  display: inline-block;
  margin: 0 10px;
}
.line {
  width: 80px;
  height: 4px;
  margin: 0 auto;
  background: #0356ff;
  border-radius: 2px;
  position: relative;
  top: -4px;
}

.title {
  height: 29px;
  font-size: 30px;
  font-weight: 500;
  color: #ffffff;
}

.header {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 152px;
  font-size: 18px;

  color: #81838b;
}

.top2 {
  /* margin-top: 10px; */
  position: relative;
  width: 100%;
  /* height: 88px; */
  display: flex;
  justify-content: center;
  background: url("../assets/img/page/page05/header.png") no-repeat;
  width: 1920px;
  height: 80px;
}

.daohang {
  width: 100%;
  /* background-color: #011547; */
  display: flex;
  justify-content: center;
  align-items: center;
}

.daohang li {
  float: left;
  list-style: none;
  width: 116px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
}

.header-right {
  position: absolute;
  top: 10px;
  right: 0;
  width: 70px;
  padding-left: 10px;
  padding-top: 5px;
}

.date {
  position: absolute;
  top: 10px;
  right: 80px;
  width: 200px;
  padding-left: 10px;
  padding-top: 5px;
  font-size: 16px;
}

.header-user-con {
  display: flex;
  height: 20px;
  align-items: center;
}

.el-dropdown-link {
  color: floralwhite;
  cursor: pointer;
}
</style>
